<!--动作定义-->
<template>
  <div class="func-define">
    <!-- <div class="header">
      <div class="title">功能列表</div>
      <el-tooltip v-if="developStatus == 1" content="产品已发布，信息不可修改，如需修改，请返回开发状态" placement="top">
        <div class="disbled">
          <el-button
            type="add"
            icon="el-icon-plus"
            :disabled="developStatus == 1 || rolesCode === 'SALE'"
            size="14"
            @click="addFunc">
            添加功能</el-button>
        </div>
      </el-tooltip>
      <el-button
        v-else
        type="add"
        icon="el-icon-plus"
        :disabled="!developStatus || rolesCode === 'SALE'"
        size="14"
        @click="addFunc">添加功能</el-button>
    </div> -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#F5F6F7' }"
      size="medium">
      <el-table-column prop="dpid" label="DP ID" width="80">
        <template slot-scope="scope">
          {{ scope.row.dpid || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="功能点名称">
        <template slot-scope="scope">
          {{ scope.row.name || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="标识符">
        <template slot-scope="scope">
          {{ scope.row.id || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="数据传输类型" :formatter="formatPermission">
      </el-table-column>
      <el-table-column prop="valueType" label="数据类型">
        <template slot-scope="scope">
          {{
            scope.row.valueType.type ? formatValueType[scope.row.valueType.type]
            : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="source" label="功能点属性">
        <template slot-scope="scope">
          {{
            scope.row.expands.source ? source[scope.row.expands.source] : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="description" label="备注">
        <template slot-scope="scope">
          {{ scope.row.description || "-" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-tooltip v-if="developStatus == 1" content="产品已发布，信息不可修改，如需修改，请返回开发状态" placement="top">
            <el-button type="text" size="operate" disabled @click="handleDelete(scope.row.dpid)">删除</el-button>
          </el-tooltip>
          <el-button
            v-else
            type="text"
            size="operate"
            :disabled="tableData.length === 1 || rolesCode === 'SALE'"
            @click="handleDelete(scope.row.dpid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination> -->
    <el-dialog title="添加功能" :visible.sync="dialogVisible" width="930px" :before-close="handleClose" custom-class="dialog">
      <div class="list">
        <div class="contain-left">
          <div class="contain-left-header">
            <div class="title">选择功能</div>
            <div class="select-btn" @click="addSelectedFunc">全部选择</div>
          </div>
          <ul v-if="detaledFunData.length" class="func-list">
            <li v-for="item in detaledFunData" :key="item.dpid" @click="selectFunc(item)">
              <div>
                <div class="func-list-title">功能点名称</div>
                <div>
                  <span class="dpid">DP ID：{{ item.dpid }}</span>
                  <span>标识符：{{ item.id }}</span>
                </div>
                <div class="desc">备注：{{ item.description }}</div>
              </div>
              <i class="iconfont icon-xuanzegongneng"></i>
            </li>
          </ul>
          <div v-else class="no-data">无选择功能</div>
        </div>
        <div class="selected-right">
          <div class="selected-right-header">
            <div class="title">已选功能</div>
            <div class="delete-btn" @click="deteleAllSelectedFunc">
              全部清除
            </div>
          </div>
          <ul class="selected-func-list">
            <li v-for="item in selectedFuncData" :key="item.dpid">
              <div>
                <div class="func-list-title">功能点名称</div>
                <div>
                  <span class="dpid">DP ID：{{ item.dpid }}</span>
                  <span class="">标识符：{{ item.id }}</span>
                </div>
                <div class="desc">备注：{{ item.description }}</div>
              </div>
              <i class="iconfont icon-tianjiagongneng-shanchu" @click="deteleSelectFunc(item)"></i>
            </li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="14" @click="handleClose">取 消</el-button>
        <el-button type="primary" size="14" :disabled="!selectedFuncData.length" @click="onsubmit">确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  propertiesList,
  detele,
  addProperties,
  getDeletedProperties
} from "@/api/product/product-details"
import { mapGetters } from "vuex"
export default {
  name: "functionDefine",
  data() {
    return {
      loading: true,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 列表数据总条数
      tableData: [], // 功能列表数据
      dialogVisible: false,
      productId: "", // 产品id
      developStatus: "", // 开发状态
      detaledFunData: [], // 删除后的功能列表数据
      formatValueType: {
        // 数据类型
        boolean: "布尔型（boolean）",
        int: "整数型（int）",
        enum: "枚举（enum）",
        long: "长整数型（long）",
        float: "单精度浮点型（float）",
        double: "双精度浮点型（double）",
        text: "字符串（text）",
        date: "时间（date）"
      },
      source: {
        // 功能点
        device: "设备"
      },
      selectedFuncData: [] // 已选功能数据
    }
  },
  computed: {
    ...mapGetters(["rolesCode"])
  },
  created() {
    this.productId = this.$route.query.productId
    this.developStatus = this.$route.query.developStatus
    this.queryFuncList()
  },
  methods: {
    // 功能列表
    queryFuncList() {
      this.loading = true
      const params = {
        productId: this.productId
      }
      propertiesList(params)
        .then((res) => {
          this.tableData = res.data.data
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
      this.loading = false
    },
    // 添加功能
    addFunc() {
      this.getAddFuncList()
      this.dialogVisible = true
    },
    // 添加功能列表
    getAddFuncList() {
      const params = {
        productId: this.productId
      }
      getDeletedProperties(params)
        .then((res) => {
          this.detaledFunData = res.data.data
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 删除功能列表数据
    handleDelete(dpid) {
      const params = {
        productId: this.productId,
        dpid,
        type: 0
      }
      detele(params)
        .then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!"
          })
          this.queryFuncList()
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.queryFuncList()
    },
    // 当前页变时触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryFuncList()
    },
    // 选择功能添加单个数据
    selectFunc(item) {
      const isIdExist = this.selectedFuncData.some(
        (data) => data.dpid === item.dpid
      )
      // 添加新数据（如果id不存在）
      if (!isIdExist) {
        this.selectedFuncData.push(item)
      }
      this.detaledFunData = this.detaledFunData.filter((data) => {
        return data.dpid !== item.dpid
      })
    },
    // 选择功能全部数据
    addSelectedFunc() {
      if (this.detaledFunData.length) {
        this.detaledFunData.map((item) => {
          this.selectedFuncData.push(item)
        })
        this.detaledFunData = []
      }
    },
    // 删除已选功能数据
    deteleAllSelectedFunc() {
      if (this.selectedFuncData.length) {
        this.selectedFuncData.map((item) => {
          this.detaledFunData.push(item)
        })
        this.selectedFuncData = []
      }
    },
    // 删除右侧已选功能数据
    deteleSelectFunc(item) {
      this.selectedFuncData = this.selectedFuncData.filter(
        (data) => data.dpid !== item.dpid
      )

      const isIdExist = this.detaledFunData.some(
        (data) => data.dpid === item.dpid
      )
      // 添加新数据（如果id不存在）
      if (!isIdExist) {
        this.detaledFunData.push(item)
      }
    },
    /**
     * 提交添加功能数据
     */
    onsubmit() {
      const dpidArr = []
      this.selectedFuncData.map((item) => {
        dpidArr.push(item.dpid)
      })
      const params = {
        productId: this.productId,
        dpids: dpidArr,
        type: 1
      }
      addProperties(params)
        .then((res) => {
          this.$message({
            type: "success",
            message: "添加成功!"
          })
          this.queryFuncList()
          this.dialogVisible = false
          this.selectedFuncData = []
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 关闭添加功能弹窗
    handleClose() {
      this.dialogVisible = false
      this.selectedFuncData = []
    },
    // 数据传输类型
    formatPermission(row) {
      const permissions = row.expands.type
      let displayText = ""
      permissions.forEach((permission) => {
        if (displayText !== "") {
          displayText += " "
        }
        switch (permission) {
          case "read":
            displayText += "读"
            break
          case "write":
            displayText += "写"
            break
          case "report":
            displayText += "上报"
            break
        }
      })
      return displayText
    }
  }
}
</script>
<style lang="scss" scoped>
.func-define {
  height: 100%;
  font-size: 14px;

  .header {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    float: right;

    .title {
      font-weight: 600;
      color: #252525;
    }
  }

  .list {
    display: flex;
    justify-content: space-between;

    .contain-left,
    .selected-right {
      width: 438px;
      height: 531px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dedede;
      overflow: hidden;
      overflow-y: auto;

      .contain-left-header,
      .selected-right-header {
        height: 48px;
        background: #e9eaeb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;

        .title {
          font-weight: 600;
          color: #252525;
        }

        .select-btn,
        .delete-btn {
          font-weight: 400;
          color: #2b6ff8;
          cursor: pointer;
        }
      }

      .func-list,
      .selected-func-list {
        font-size: 12px;
        font-weight: 400;
        color: #808080;
        padding: 0;
        margin: 0;

        li {
          border-bottom: 1px solid #dedede;
          padding: 10px 16px;
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;

          .iconfont {
            cursor: pointer;
          }
        }

        .func-list-title {
          font-weight: 400;
          color: #252525;
          height: 20px;
          line-height: 20px;
        }

        .dpid {
          margin-right: 26px;
        }

        .desc {
          font-size: 12px;
          font-weight: 400;
          height: 17px;
          height: 17px;
        }
      }

      .no-data {
        text-align: center;
        margin-top: 200px;
        color: #252525;
      }
    }
  }
}

::v-deep .el-table__fixed-right-patch {
  background: #f5f6f7;
}
</style>
